<template>
  <!--  消息订阅组件 -->
  <view class="message_subscription">

    <button @click="judgementMessageSwitch()" style="margin: 20px;background-color: #FFFFFF;">消息订阅测试</button>

    <u-popup v-model="showOpenSettingDialog" mode="center" width="520rpx" :mask-close-able="false" height="300rpx"
             border-radius="18">
      <div class="mock-dialog">
        <div class="mock-dialog-content">
          <div class="mock-dialog-title">提示</div>
          <div class="mock-dialog-text">
            {{tipsContent}}
          </div>
        </div>
        <div class="mock-dialog-button">
          <div class="color-gray" @click="dontOpenSetting">{{buttonCancelText}}</div>
          <div class="color-blue" @click="openSetting">{{buttonConfirmText}}</div>
        </div>
      </div>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'messageSubscription',
  components: {},
  data() {
    return {
      showOpenSettingDialog: false, // 授权询问弹框，uview
      tipsContent: '为了及时获取订单状态，您是否想接收订单状态的消息提醒？', // 弹框提示内容，
      buttonConfirmText: '去开启消息提醒',
      buttonCancelText: '不需要提醒',
    }
  },
  methods: {
    // 判断消息订阅总开关是否打开
    judgementMessageSwitch(flag) {
      let that = this
      uni.getSetting({
        withSubscriptions: true,
        success(res) {
          console.log(res)
          if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的，引导用户去打开
            that.showOpenSettingDialog = true
          } else { // 如果开着，则继续向下打开弹窗，获取用户授权
            that.messageSubscription()
          }

        },
        fail() {
          that.messageSubscription() // 如果失败，则继续向下打开弹窗，获取用户授权
        }
      })
    },

    // 弹窗点订阅，开启消息订阅提醒
    openSetting() {
      if(this.buttonConfirmText == '确定'){
        this.messageSubscription()
        return
      }

      var that = this
      uni.openSetting({
        withSubscriptions: true,
        complete(res) {
          uni.getSetting({
            withSubscriptions: true,
            success(res) {
              if (res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是开着的
                that.tipsContent = '再次点击确定，弹出可订阅列表进行订阅'
                that.buttonCancelText = '取消'
                that.buttonConfirmText = '确定'
              } else {
                that.showOpenSettingDialog = false;
              }
            }
          })
        }
      })
    },

    // 弹窗点不订阅
    dontOpenSetting() {
      this.showOpenSettingDialog = false;
    },

    // 订阅申请弹出，只允许点击弹出
    messageSubscription() {
      this.tipsContent= '为了及时掌握订单状态，您是否想接收订单状态的消息提醒？' // 弹框提示内容，
      this.buttonConfirmText= '去开启消息提醒'
      this.buttonCancelText= '不需要提醒'
      let that = this
      that.showOpenSettingDialog = false;
      let tmplId = ['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 模板ID，去小程序后台管理开一个，写进数组里，官方文档也有介绍
      uni.requestSubscribeMessage({
        tmplIds: tmplId,
        success(res) {
          console.log("success", res)
          if (res['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] == 'accept') {
            console.log('订阅成功');
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
